
// login.js
var _account_service = require('service/account-service.js');
const _util = require('../../util/util');

var loginForm = {
    status: true,           // true=密码登录，false=短信登录
    currentCaptcha: '',     // 存储当前 Canvas 验证码

    init: function () {
        // 初始显示设置
        $('#signUp').hide();
        $('#phoneLogin').hide();

        // 生成并绘制第一张验证码
        this.refreshCaptcha();

        this.bindEvents();
        return this;
    },

    // —— Canvas 验证码部分 —— //

    // 生成随机验证码字符串
    generateCode: function (len = 5) {
        const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
        let str = '';
        for (let i = 0; i < len; i++) {
            str += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return str;
    },

    // 在 Canvas 上绘制验证码
    drawCaptcha: function (code) {
        const canvas = document.getElementById('captchaCanvas');
        const ctx = canvas.getContext('2d');
        // 清空 & 背景
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = '#f2f2f2';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // 绘制字符
        for (let i = 0; i < code.length; i++) {
            const char = code[i];
            const x = 10 + i * 20;
            const y = 25 + Math.random() * 8;
            const deg = (Math.random() - 0.5) * 30 * Math.PI / 180;
            ctx.save();
            ctx.translate(x, y);
            ctx.rotate(deg);
            ctx.font = '24px Arial';
            // ✅ 生成深色系（避免与背景色接近）
            const hue = Math.floor(Math.random() * 360);
            ctx.fillStyle = `hsl(${hue}, 70%, 30%)`; // 使用 HSL 颜色模式确保对比度
            ctx.fillText(char, 0, 0);
            ctx.restore();
        }

        // 绘制干扰线
        for (let i = 0; i < 3; i++) { // ✅ 减少干扰线数量
            ctx.beginPath();
            ctx.moveTo(Math.random() * canvas.width, Math.random() * canvas.height);
            ctx.lineTo(Math.random() * canvas.width, Math.random() * canvas.height);
            // ✅ 使用半透明浅色线条
            ctx.strokeStyle = `rgba(150, 150, 150, 0.3)`;
            ctx.lineWidth = 1;
            ctx.stroke();
        }
    },

    // 刷新验证码
    refreshCaptcha: function () {
        this.currentCaptcha = this.generateCode();
        this.drawCaptcha(this.currentCaptcha);
        console.log('【本次验证码】', this.currentCaptcha);
    },

    // —— 事件绑定 —— //
    bindEvents: function () {
        const _this = this;

        // 切换到密码登录
        $('#imageVerifyLi').on('click', function () {
            _this.status = true;
            $(this).addClass('on');
            $('#phoneVerifyLi').removeClass('on');
            $('#passwordLogin').show();
            $('#phoneLogin').hide();
        });

        // // 切换到短信登录
        // $('#phoneVerifyLi').on('click', function () {
        //     _this.status = false;
        //     $(this).addClass('on');
        //     $('#imageVerifyLi').removeClass('on');
        //     $('#passwordLogin').hide();
        //     $('#phoneLogin').show();
        // });

        // 点击“看不清？换一张”
        $('#refreshCaptcha').on('click', function () {
            _this.refreshCaptcha();
        });

        // 点击“Login”
        $('#signon').on('click', function () {
            if (_this.status) {
                _this.loginByPassword();
            } else {
                _this.loginByPhone();
            }
        });

        // 点击“获取验证码”（短信登录）
        $('#sendBtn').on('click', function () {
            const Phone = $('#memPhone').val().trim();
            if (Phone === '' || Phone.length !== 11) {
                return alert("请输入正确的手机号！");
            }
            const data = { memPhone: Phone };
            _account_service.sendCode(
                data,
                function (resp) {
                    alert("发送成功");
                    timer();
                },
                function (err) {
                    alert("连接超时！");
                }
            );
            let wait = 60;
            function timer() {
                if (wait === 0) {
                    $("#sendBtn").val("获取验证码").prop("disabled", false)
                        .css({ "border-color": "#1e9fff", "background": "#fff", "cursor": "pointer" });
                    wait = 60;
                } else {
                    $("#sendBtn").prop("disabled", true)
                        .css({ "border-color": "#fbfbfb", "background": "#ccc", "cursor": "not-allowed" })
                        .val(wait + "秒后重发");
                    wait--;
                    setTimeout(timer, 1000);
                }
            }
        });

        // 注册跳转
        $('#signup').on('click', function () {
            $('#login').hide();
            $('#signUp').show();
        });

        // 密码 & 重复密码 验证（注册区，可保留原逻辑）
        $('#newPassword').on('keyup', function () {
            if (this.value.length >= 6 && this.value.length <= 16) {
                $('#newPasswordTips').attr("class", 'successMsg').text('密码可用');
            } else {
                $('#newPasswordTips').attr("class", 'errorMsg').text('密码长度 6–16 位');
            }
        });
        $('#repeatedPassword').on('keyup', function () {
            if (this.value === $('#newPassword').val()) {
                $('#repeatedPasswordTips').text('');
            } else {
                $('#repeatedPasswordTips').attr("class", 'errorMsg').text('密码不一致');
            }
        });

        // 注册提交（保留原逻辑）
        $('#signUpSubmit').on('click', function () {
            const account = {
                username: $('#newUsername').val(),
                password: $('#newPassword').val(),
                repeatedPassword: $('#repeatedPassword').val(),
                email: $('#email').val(),
                firstname: $('#firstname').val(),
                lastname: $('#lastname').val(),
                status: $('#status').val(),
                address1: $('#address1').val(),
                address2: $('#address2').val(),
                city: $('#city').val(),
                state: $('#state').val(),
                zip: $('#zip').val(),
                country: $('#country').val(),
                phone: $('#phone').val(),
                languagePref: $('#languagePref').val(),
                favoriteCategory: $('#favoriteCategory').val()
            };

            // 空值校验
            for (let key in account) {
                if (!account[key]) {
                    alert(`请填写所有必填项：${key}`);
                    return;
                }
            }

            // 密码一致性校验
            if (account.password !== account.repeatedPassword) {
                alert('密码不一致，请重新输入！');
                return;
            }

            // 提交注册请求
            _account_service.signUp(
                account,
                function (resp) {
                    alert("注册成功! 欢迎 " + resp.username);
                    window.location.href = './catalog-main.html';
                },
                function (errMsg) {
                    alert("注册失败，请检查信息: " + errMsg);
                }
            );
        });
    },

    // —— 登录逻辑 —— //

    // 密码登录
    loginByPassword: function () {
        const account = {
            username: $.trim($('#username').val()),
            password: $.trim($('#password').val()),
            code: $.trim($('#imageCode').val()).toUpperCase()
        };
        // 校验非空
        if (!this.requireValidation([account.username, account.password, account.code])) {
            return alert('请填写完整信息');
        }
        // 前端验证码校验
        if (account.code !== this.currentCaptcha) {
            alert('验证码不正确，请重试 😊');
            this.refreshCaptcha();
            $('#imageCode').val('');
            return;
        }

        _account_service.login(
            account,
            function (resp) {
                alert("登录成功! 欢迎 " + account.username);
                $('#signOnSpan').hide();
                $('#signOutSpan').show();
                window.location.href = './catalog-main.html';
            },
            function (err) {
                alert("登录失败：" + err);
                $('#password').val('');
                $('#imageCode').val('');
            }
        );
    },

    // 短信登录（保持原有逻辑）
    // loginByPhone: function () {
    //     const data = {
    //         phone: $.trim($('#memPhone').val()),
    //         mcode: $.trim($('#mcode').val())
    //     };
    //     if (!this.phoneValidation(data.phone) || !this.requireValidation([data.mcode])) {
    //         return alert('请输入有效的手机号和短信验证码');
    //     }
    //     _account_service.loginByPhone(
    //         data,
    //         function (resp) {
    //             localStorage.setItem('token', resp.token);
    //             localStorage.setItem('username', resp.username);
    //             alert("登录成功! 欢迎 " + resp.username);
    //             window.location.href = './catalog-main.html';
    //         },
    //         function (errorMsg) {
    //             $('#mcode').val('');
    //             alert("登录失败：" + errorMsg);
    //         }
    //     );
    // },

    // 表单非空校验
    requireValidation: function (arr) {
        for (let v of arr) {
            if (!v) return false;
        }
        return true;
    },
    // 手机号校验
    phoneValidation: function (phone) {
        return _util.validateField('phone', phone);
    }
};

// 文档加载完毕后初始化
$(function () {
    loginForm.init();
});






